<div>
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="#">WMS</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="#">Outbound</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="#">Load</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="#">Select Order</a>
            </li>
        </ul>
    </div>
    <div class="container-fluid" style="margin:15px">
        <div class="row">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject bold">Search Order To Build Load</span>
                    </div>
                </div>
                <div class="portlet-body form form-horizontal">
                    <order-search-form is-loading="isLoading" order="searchParam" search-orders="searchOrders(searchParam)"></order-search-form>
                </div>
                <div class="row">
                    <div class="portlet light">
                        <div class="portlet-title">
                            <div class="caption">
                                <span class="caption-subject bold"> Search Results</span> | Estimated Weight: {{totalSelectWeight}}
                            </div>
                            <div class="actions">
                                <a class="caption-subject bold" ng-click="selectAll()"> Select All</a> |
                                <a class="caption-subject bold" ng-click="viewOrCloseDetail(viewOrClose)">
                                    {{viewOrClose}} Details</a>
                            </div>
                        </div>
                        <div ng-show="isLoading" class="text-center">
                            <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
                        </div>
                        <div class="portlet-body form form-horizontal" ng-show="!isLoading">
                            <div class="panel panel-default bordered box-shadow-none" style="margin-left: 10px;"
                                 ng-repeat="order in orders">
                                <div class="panel-heading" style="padding-bottom: 0;border-bottom:0;padding-top: 0px;">
                                    <div class="portlet light box-shadow-none">
                                        <div class="portlet-title" style="margin-bottom: 0;min-height: 32px;">
                                            <div class="caption">
                                                <span class="caption-subject bold"><input
                                                        ng-checked="isChecked(order)" ng-click="checkOrUncheck(order)"
                                                        type="checkbox"
                                                        style="padding-top:3px;"> Order:{{order.id}}  | Estimated Weight: <b>{{order.totalWeight}} {{order.weightUnit}}</b></span>
                                            </div>
                                            <div class="actions" style="padding-bottom: 6px;">
                                                <a href="javascript:;" ng-click="showIn($index)"> Show/Hide Order</a>
                                            </div>
                                        </div>
                                        <div class="portlet-body" style="padding-left:20px;">
                                            <div class="row form-group">
                                                <div class="col-md-3">
                                                    <span class="bold">Customer:</span>
                                                     <span>
                                                       {{order.customerName}}&nbsp;
                                                     </span>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="bold">Carrier:</span>
                                                     <span>
                                                       {{order.carrierName}}&nbsp;
                                                     </span>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="bold">Reference No.:</span>
                                                     <span>
                                                        {{order.referenceNo}}&nbsp;
                                                     </span>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="bold">Purchase Order No.:</span>
                                                     <span>
                                                        {{order.poNo}}&nbsp;
                                                     </span>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-3">
                                                    <span class="bold">Status:</span>
                                                     <span>
                                                        {{order.status}}&nbsp;
                                                     </span>
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="bold">Order Type:</span>{{order.orderType}}
                                                </div>
                                                <div class="col-md-3">
                                                    <span class="bold">Delivery Request Date:</span>{{order.mabd | date:'yyyy-MM-dd'}}
                                                </div>
                                            </div>
                                            <div class="row form-group" >
                                                <div class="col-md-12">
                                                    <span class="bold">Ship To:</span>{{getAddressInfo(order.shipToAddress)}}
                                                </div>
                                            </div>
                                            <div class="row" style="padding-bottom: 15px;">
                                                <div class="col-md-12">
                                                    <label class="bold">Item:</label>
                                                    <label>
                                                        <ul class="list-unstyled list-inline"
                                                            style="margin-bottom: 0px;">
                                                            <li ng-repeat="item in orderItemLineMap[order.id]">
                                                                <label ng-hide="$index==0">|</label>
                                                                <a href="#"><item-display item="itemMap[item.itemSpecId]"></item-display></a>
                                                            </li>
                                                        </ul>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse {{getIn($index)}}">
                                    <div class="panel-body">
                                        <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer"
                                               role="grid">
                                            <thead>
                                                <th>Item</th>
                                                <th>UOM</th>
                                                <th>QTY</th>
                                            </thead>
                                            <tbody>
                                            <tr ng-repeat="item in orderItemLineMap[order.id]">
                                                <td><item-display item="itemMap[item.itemSpecId]"></item-display></td>
                                                <td>{{item.unitName}}</td>
                                                <td>{{item.qty}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <pager total-count="paging.totalCount" current-page ="paging.pageNo" page-size="pageSize"  load-content="loadContent(currentPage)"></pager>
                            <div class="row form-actions right">
                                <button ng-click="add()" class="btn blue">Add</button>
                                <button ng-click="cancel()" class="btn grey">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>